<template>
  <section class="bg-gray-50 py-16 lg:py-20">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <!-- 标题区域 -->
      <div class="text-center max-w-3xl mx-auto mb-12 lg:mb-16">
        <span class="inline-block px-3 py-1 text-sm font-medium text-indigo-600 bg-indigo-50 rounded-full mb-4">
          最新动态
        </span>
        <h2 class="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">
          {{ news?.title ? news.title : '新闻中心' }}
        </h2>
        <p class="text-lg text-gray-600">
          {{ news?.description ? news.description : '了解我们最新的公司新闻、产品更新和活动信息。' }}
        </p>
      </div>

      <!-- 新闻卡片 -->
      <div class="grid gap-8 lg:grid-cols-2 lg:grid-cols-3">
        <article v-for="(item, index) in news?.items" :key="index"
          class="bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow overflow-hidden flex flex-col">
          <div class="relative pt-[56.25%] overflow-hidden">
            <img :src="item.image_url" :alt="item.title"
              class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 hover:scale-105">
          </div>
          <div class="p-6 flex-grow flex flex-col">
            <div class="flex items-center justify-between mb-3">
              <span class="inline-flex items-center px-3 py-1 text-xs font-medium rounded-full" :class="{
                'bg-blue-100 text-blue-800': item.tag === 'company_news',
                'bg-green-100 text-green-800': item.tag === 'product_update',
                'bg-purple-100 text-purple-800': item.tag === 'activity'
              }">
                {{ item.tag === 'company_news' ? '公司新闻' : item.tag === 'product_update' ? '产品更新' : '活动' }}
              </span>
              <time class="text-sm text-gray-500" :datetime="item.publish_date">
                {{ formatDate(item.publish_date) }}
              </time>
            </div>

            <h3 class="text-xl font-semibold text-gray-900 mb-3 leading-snug">
              {{ item.title }}
            </h3>

            <p class="text-gray-600 mb-4 flex-grow">
              {{ item.description }}
            </p>

            <a href="#" class="inline-flex items-center text-indigo-600 hover:text-indigo-800 font-medium group">
              阅读全文
              <svg class="ml-2 w-4 h-4 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor"
                viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3">
                </path>
              </svg>
            </a>
          </div>
        </article>
      </div>

      <!-- 查看更多按钮 -->
      <!-- <div class="text-center mt-12">
        <button
          class="inline-flex items-center px-6 py-3 border border-gray-300 text-gray-700 font-medium rounded-lg hover:bg-gray-50 hover:border-gray-400 transition-colors">
          浏览所有新闻
          <svg class="ml-2 -mr-1 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
          </svg>
        </button>
      </div> -->
    </div>
  </section>
</template>
<script setup lang="ts">

import type { News } from "~/types/page-admin"

const props = defineProps<{
  news?: News
}>();

// const news = [
//   {
//     title: '公司荣获2023年度最佳数字化解决方案提供商',
//     date: '2023-06-15',
//     category: '公司新闻',
//     excerpt: '我们很荣幸地宣布，公司被评为2023年度最佳数字化解决方案提供商，这是对我们技术创新和服务质量的充分肯定。',
//     image: '/favicon.ico'
//   },
//   {
//     title: '新产品发布：智能数据分析平台3.0',
//     date: '2023-05-20',
//     category: '产品更新',
//     excerpt: '我们很高兴推出智能数据分析平台3.0版本，带来更强大的AI分析功能和更直观的可视化界面，助力企业数据驱动决策。',
//     image: '/favicon.ico'
//   },
//   {
//     title: '参加2023国际科技博览会',
//     date: '2023-04-10',
//     category: '活动',
//     excerpt: '我们将参加即将举行的2023国际科技博览会(展位号B23)，展示最新数字化解决方案，欢迎合作伙伴和客户莅临交流。',
//     image: '/favicon.ico'
//   }
// ]

const formatDate = (dateString: string) => {
  const options: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'long', day: 'numeric' }
  return new Date(dateString).toLocaleDateString('zh-CN', options)
}
</script>
